import styled from 'styled-components'

// 容器
const Wrapper = styled.div`
  position: fixed;
  bottom: 0;
  left 0;
  height: 50px;
  width: 100%;
  padding: 0 10px 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #efefef;
  background: #fff;
`

// 全选
const CheckFull = styled.div`
  position: relative;
  top: 3px;
  [type='checkbox'] {
    border-radius: 10px;
  }
  label {
    position: relative;
    top: 1px;
  }
`

// 总价
const Amount = styled.span`
  color: red;
  font-weight: bold;
`

// 结算
const SettleButton = styled.button`
  border-radius: 40px;
  font-size: 12px;
  min-width: 100px;
  height: 36px;
`

export default function Footer(props) {
  const onFullChange = e => props.onFullChange(e.target.checked)

  return (
    <Wrapper>
      <CheckFull className="form-check">
        <input
          className="form-check-input"
          type="checkbox"
          id="cbFull"
          checked={props.isFull}
          onChange={onFullChange}
        />
        <label className="form-check-label" htmlFor="cbFull">
          全选
        </label>
      </CheckFull>

      <span>
        总价：<Amount>￥{props.amount}</Amount>
      </span>

      <SettleButton type="button" className="btn btn-primary">
        结算({props.total})
      </SettleButton>
    </Wrapper>
  )
}
